<template>
	<view class="detailAll">
		<!-- 标题 -->
		<view class="title">
			<view class="titleLeft" v-for="(item,index) in dataList" :key="indedx">
				<text style="margin-right: 10rpx;">#</text>
				<text>{{item.title}}</text>
			</view>
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
				@input="input" @cancel="cancel" @clear="clear" style="width: 50%;">
			</uni-search-bar>
		</view>
		<!-- 头像 浏览量 参与人数 -->
		<view class="number">
			<view class="headPicture">
				<image src="../../static/imgs/user4.jpg" style="width: 30rpx;height: 30rpx;border-radius: 50%;">
				</image>
				<image src="../../static/imgs/user5.jpg" style="width: 30rpx;height: 30rpx;border-radius: 50%;">
				</image>
				<image src="../../static/imgs/user7.jpg" style="width: 30rpx;height: 30rpx;border-radius: 50%;">
				</image>
			</view>
			<view class="personNum">
				<text style="margin-right: 35rpx;">6661万浏览</text>
				<text>20.2万参与</text>
				<uni-icons type="right" size="10" @click="handleClick"
					style="color: rgb(203, 203, 203);margin-right: 15rpx;"></uni-icons>
			</view>
		</view>
	</view>
	<!-- 加入讨论 -->
	<view class="discuss">
		<view class="">
			<view class="textTitle">发起关于龙马精神的讨论吧</view>
			<view class="personNum">
				<text style="margin-right: 35rpx;">6661万浏览</text>
				<text>20.2万参与</text>
			</view>
			<uni-icons type="right" size="10" @click="handleClick"
				style="color: rgb(203, 203, 203);margin-right: 15rpx;"></uni-icons>
		</view>
		<!-- 按钮 -->
		<button style="background-color: rgb(249, 109, 149);color: rgb(249, 193, 212); width: 190rpx;height: 65rpx;border-radius: 45%;">加入讨论</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				searchValue: '',

			}
		},
		methods: {
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			handleClick() {
				uni.navigateTo({
					// url:'/pages/index/index'
				})
			},
		},
		onLoad(options) {
			let info = JSON.parse(decodeURIComponent(options.info))
			// console.log(info, '传递的数据');
			this.dataList.push(info)
			// console.log(this.dataList);
		},
	}
</script>

<style lang="scss" scoped>
	.detailAll {
		padding: 20rpx;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;


			.titleLeft {
				font-weight: 600;
			}
		}
	}

	.number {
		display: flex;
		padding: 20rpx;

		.headPicture {
			margin-right: 35rpx;
		}

		.personNum {
			font-size: 24rpx;
			color: rgb(203, 203, 203);
		}
	}

	.discuss {
		padding: 20rpx;
		display: flex;
		margin-top: 30rpx;
		// background-color: rg;

		.textTitle {
			width: 200px;
			max-width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.personNum {
			font-size: 24rpx;
			color: rgb(203, 203, 203);
		}
	}
</style>